<template>
    <FormItem :label="`${itemData.label}：`"
              :prop="itemData.name">
        <!-- <Input v-model="itemData.value" :type="itemData.inputType" :placeholder="itemData.placeholder" :element-id="itemData.name" @on-change="handleInputChange" /> -->
        <div class="demo-upload-list"
             v-for="item in uploadList"
             :key="item.name">
            <template v-if="item.status === 'finished'">
                <img :src="item.url">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline"
                          @click.native="handleView(item.url)"></Icon>
                    <Icon type="ios-trash-outline"
                          @click.native="handleRemove(item)"
                          v-if="!itemData.readonly"></Icon>
                </div>
            </template>
            <template v-else>
                <Progress v-if="item.showProgress"
                          :percent="item.percentage"
                          hide-info></Progress>
            </template>
        </div>
        <Upload v-show="uploadList < itemData.maxLen"
                ref="upload"
                name="myfile"
                :show-upload-list="itemData.showUploadList"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="itemData.format"
                :max-size="itemData.maxSize"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                :multiple="itemData.multiple"
                :type="itemData.type"
                action="/sysback/fileserver/upload"
                style="display: inline-block;width:58px;">
            <div class="demo-upload-camera">
                <Icon type="ios-camera"
                      size="20"></Icon>
            </div>
        </Upload>
        <Modal title="图片预览"
               v-model="visible">
            <img :src="imgUrl"
                 v-if="visible"
                 style="width: 100%">
        </Modal>
    </FormItem>
</template>
<script>
    export default {
        props: {
            itemData: {
                type: Object
            },
            formData: {
                type: Object
            }
        },
        data () {
            return {
                defaultList: [],
                uploadList: [], // 上传文件列表
                imgUrl: '',
                visible: false
            }
        },
        watch: {
            'formData.icon' (val, oVal) {
                this.defaultList = [];
                this.defaultList.push(
                    { name: val, url: this.imgBaseURL + val }
                )
                this.$nextTick(() => {
                    this.uploadList = this.$refs.upload.fileList;
                });
            },
            'formData.platLogoKey' (val, oVal) {
                this.defaultList = [];
                this.defaultList.push(
                    { name: val, url: this.imgBaseURL + val }
                )
                this.$nextTick(() => {
                    this.uploadList = this.$refs.upload.fileList;
                });
            }
        },
        created () {
        },
        mounted () {
            if (this.formData.platLogoKey || this.formData.icon) {
                this.defaultList.push(
                    { name: 'img', url: this.formData.platLogoKey ? this.imgBaseURL + this.formData.platLogoKey : this.imgBaseURL + this.formData.icon }
                )
            }
            this.$nextTick(() => {
                this.uploadList = this.$refs.upload.fileList;
            });
        },
        methods: {
            handleChange () {
                this.$emit('handleChangeFormData', this.formData);
            },
            // 预览图片
            handleView (url) {
                this.imgUrl = url;
                this.visible = true;
            },
            // 移除图片
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                this.handleChange();
            },
            // 上传成功
            handleSuccess (res, file, fileList) {
                file.url = 'https://dev-file.iviewui.com/userinforaP8NeQgYpmKgkpWlqZP7rfewbHiIzJY/avatar';
                file.name = '小头像';
                file.url = this.imgBaseURL + file.response.retData;
                // this.formData[this.itemData.name].push({ name: file.name, url: file.url });

                if (file.response.retData) {
                    this.formData[this.itemData.name] = file.response.retData;
                }

                this.handleChange();
            },
            // 上传出错
            handleFormatError (file) {
                let fileType = this.itemData.format.join(',');
                this.$Notice.warning({
                    title: '图片格式不正确',
                    desc: '图片' + file.name + '格式不正确, 请选择' + fileType + '格式的图片.'
                });
            },
            // 上传最大限制
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '图片  ' + file.name + ' 太大了, 请确保图片在' + this.itemData.maxSize + 'kb以内.'
                });
            },
            // 上传前校验
            handleBeforeUpload () {
                const check = this.uploadList.length < this.itemData.maxLen;
                if (!check) {
                    this.$Notice.warning({
                        title: '上传图片达到最大限制.'
                    });
                }
                return check;
            }
        }
    }
</script>
<style lang="less" scoped>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}
.demo-upload-list img {
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}
.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.demo-upload-camera {
    width: 58px;
    height: 58px;
    line-height: 58px;
}
</style>
